<template lang="pug">
  ul.dashboard-map-toolbar
    li(
      v-for="item in list"
      :key="item.name"
      :class="{'btn-active':activeToolbar===item.name}"
      @click="changeToolbar(item.name)")
      i.iconfont(
        :class="`icon-${item.icon}`"
        :style="`fontSize:${item.fontSize}`")
</template>

<script>
export default {
  name: 'dashboard-toolbar',
  props: {
    activeToolbar: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [
        {name: 'filter', icon: 'tabs', fontSize: '24px'}
      ]
    }
  },
  methods: {
    changeToolbar (value) {
      this.$emit('changeToolbar', this.activeToolbar === value ? '' : value)
    }
  }
}
</script>

<style lang="sass" scoped>
ul.dashboard-map-toolbar
  li
    width: 36px
    height: 36px
    line-height: 36px
    background-color: #fff
    border-radius: 4px
    border: 1px solid #ccc
    box-shadow: 0px 0px 10px #dfdfdf
    text-align: center
    cursor: pointer
    margin-top: 10px
    i
      color: #9f9f9f
      font-size: 32px
    i:hover
      color: #27a1f7
  .btn-active
    i
      color: #27a1f7
</style>
